<template>
    <div class="income-body">
        <div class="center-all clearfix">
            <div class="center-box">
                <div class="center-all-img clearfix">
                    <div class="income-title">
                        <van-row>
                            <van-col span="8">
                                <img class="fl icon_return" src="../../assets/image/center/jtb.png" alt="" @click="returnParent()">
                            </van-col>
                            <van-col span="8" class="text-align-c font-36">我的收入</van-col>
                            <van-col span="8" class="text-align-r">
                                <router-link tag="span" class="font-3" :to="{name:'records2',params:{recordsId2:'1111'}}">提现记录</router-link>
                            </van-col>
                        </van-row>
                    </div>
                    <span class="my-income color-default text-align-c">{{userIncome.income}}</span>
                    <span class="my-income-zi text-align-c color-6 font-28">当前收入(元)</span>
                </div>
                <div class="meili-box clearfix">
                    <div class="fl mei-left">
                        <span class="text-align-c dispaly-block color-3 font-4">{{giftMl}}<!-- 魅力{{giftPrice}} --></span>
                        <span class="text-align-c dispaly-block color-9 font-2">礼物收入（元）</span>
                    </div>
                    <div class="fl mei-left mei-right">
                        <span class="text-align-c dispaly-block color-3 font-4">{{servicePrice}}</span>
                        <span class="text-align-c dispaly-block color-9 font-2">接单收入（元）</span>
                    </div>
                </div>
            </div>
            <div class="income-list-box clearfix">
                <div class="income-list-tab">
                    <span class="fl font-28 color-6">收入明细</span>                   
                    <input class="menu-span" v-model="menuName">
                    <img @click="show=true" src="../../assets/image/center/icon_down.png" class="icon-down">
                        <!-- <select name="menuType" id="menu" @change="changeMenu(index)" v-model="index">
                            <option :value="index" v-for="(val,index) in menuArr" :key="index">{{val}}</option>                           
                        </select>  -->
                        <van-actionsheet v-model="show" :actions="menuArr" @select="onSelect" />                     
                    
                    <img class="fr datetime" src="../../assets/image/center/icon_calendar.png" alt="" srcset="" @click="isDatetime = true">
                    <img class="fr datetime" id="delete" src="../../assets/image/center/icon_delete.png" alt="" @click="resetTime()">                    
                </div>
                <!-- 此日期无账单则显示时间 -->
                <div class="showTime" v-if="endTime!=''">{{showTime}} </div> 
                 <p v-if="recordsList.length==0 && loading==false" class="arrayNull">暂无数据</p>               
                <ul class="clearfix padding-bot">
                    <van-list v-model="loading" :finished="finished" @load="onLoad()">
                        <li class="clearfix income-li" v-for="(item,index) in recordsList" :key="index">
                            <div class="fl left-box" v-if="item.type == 32">
                                <img src="../../assets/image/center/icon_gift.png" alt="">
                            </div>
                            <div class="fl left-box" v-if="item.type == 31&&item.goods&&item.goods.length>0">
                                <img :src="$imgPath(item.goods[0].obj.image)" alt="">
                            </div>
                            <div class="fl right-box">
                                <span class="color-3 font-28">
                                    <em class="fl" v-if="item.type == 32">打赏礼物</em>
                                    <em class="fl" v-if="item.type == 31&&item.goods&&item.goods.length>0">下单{{item.goods[0].goodsName + item.goods[0].count}}小时</em>
                                    <em class="fr color-default">+{{item.amount}}</em>
                                </span>
                                <span class="color-3 font-24" v-if="item.type == 32">
                                    [礼物收益]
                                </span>
                                <span class="color-3 font-24" v-if="item.type == 31">
                                    [接单收益]
                                </span>
                                <span class="color-9 font-24">
                                    {{$time(item.createTime)}}
                                </span>
                            </div>
                        </li>                        
                    </van-list>
                </ul>
            </div>
        </div>
        <van-tabbar>
            <span class="fabu-dynamic text-align-c" @click="tixian()">提现</span>
        </van-tabbar>
        <!-- 时间选择器弹框 -->
        <van-popup v-model="isDatetime" position="bottom" :overlay="true">
            <van-datetime-picker v-model="currentDate" type="year-month" :formatter="formatter" @confirm="confirmData" @cancel="isDatetime = !isDatetime" />
        </van-popup>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
import { Toast } from 'vant'
import index from '../../store';
export default {
    data(){
        return{
            loading:false,
            finished:false,
            page:-1,
            size:10,
            totalElements:-1,
            index:0,
            show:false,
            //menuArr:["全部","礼物收益","接单收益"],
            menuName:"全部",
            menuArr:[
                {id:0,name: "全部"},{id:1,name: "礼物收益"},{id:2,name: "接单收益"}
            ],
            currentDate: new Date(),
            isDatetime:false,
            giftPrice:'',   //礼物收入
            servicePrice:'',    //接单收入
            giftMl:'',
            recordsList:[],    //账单列表           
            endTime:'',     //查询当月时间
            showTime:'',    //此日期无账单要显示的时间
            userIncome:{},  //用户收入
            type:''
        }
    },
    created(){
        this.getUserMoney();
        this.money()
    },
    methods:{
        //下拉刷新
        onLoad(){          
            if(this.recordsList.length == this.totalElements){
                this.finished = true
                this.loading = false
            }else{
                this.page++
                this.cash()
            }
        },
        onSelect(item) {
            // 点击选项时默认不会关闭菜单，可以手动关闭
            this.show = false;
            this.menuName = item.name;
            this.page = 0;
            this.finished = false;           
            if(item.id==0){ 
                this.type = ''; 
                this.recordsList = [];                                   
            }else if(item.id==1){              
                this.type = 32;
                this.recordsList = [];                 
            }else{ 
                this.type = 31;
                this.recordsList = [];                                       
            }
            this.cash();  
        },
         //切换菜单
        /* changeMenu(index){           
            this.page = 0;
            this.finished = false;           
            if(index==1){  
                this.type = 32;
                this.recordsList = [];               
            }else if(index==2){              
                this.type = 31;
                this.recordsList = [];                
            }else{              
                this.type = ''; 
                this.recordsList = [];              
            }
            this.cash();       
        }, */
        //跳转到提现页面
        tixian(){
            this.$router.push({
                name:'balance',
                query:{type:40}
            });
        },
        formatter(type, value) {
            if (type === 'year') {
                return `${value}年`;
            } else if (type === 'month') {
                return `${value}月`
            }else{
                return value;
            }
        },
        confirmData(data){
            this.showTime = this.$time1(data);
            this.endTime = this.$time(data)          
            this.isDatetime = !this.isDatetime
            this.recordsList = []
            this.cash()
            //this.onLoad()
        },       
        //我的收入查询
        getUserMoney(){
            apiHttp.apiCenter.getUserWalletDetail('',resp=>{
               if(resp.code==200){
                   this.userIncome = resp.data;
               }else{
                   Toast(resp.message)
               }
            })
        },
        //  礼物收入和接单收入查询
        money(){
            apiHttp.apiCenter.income('',resp=>{                
                if(resp.code == 200){
                    this.giftMl = resp.data.giftIncomeCredits
                    this.giftPrice = resp.data.giftIncomeRMB
                    this.servicePrice = resp.data.serviceIncome
                }else{
                    Toast(resp.message)
                }
            })
        },
        // 收入列表
        cash(){
            let parmes = {
                page:this.page,
                size:this.size,
                type:this.type,
                end: this.endTime    // 查询当月时间 格式 yyyy-MM-dd HH:mm:ss
            }
            apiHttp.apiCenter.incomeList(parmes,resp=>{                              
                if(resp.code == 200){
                    for(let i=0;i<resp.data.content.length;i++){
                        let obj = JSON.parse(resp.data.content[i].goods[0].goodsType)
                        resp.data.content[i].goods[0].obj = obj
                        this.recordsList.push(resp.data.content[i]);                        
                    }                  
                    this.loading = false;
                    this.totalElements = resp.data.totalElements;                                                                                            
                }else{
                    Toast(resp.message)
                }
            })
        },       
        //返回到我的主页
        returnParent(){
            this.$router.push({
                path:"/centerAll"               
            });
        },
        //重置时间
        resetTime(){
            if(this.endTime!=''){
                this.endTime = '';
                //console.log(111)
            this.cash();
            }            
        }
        
    }
}
</script>

<style scoped>
.van-actionsheet{
    border-top-left-radius: .4rem;
    border-top-right-radius: .4rem;    
    /* color: #999; */
}
.padding-bot{
    padding-bottom: 3rem;
}
.showTime{
    color: #a8a7a7;
    margin-top: 0.2rem;
}
.menu-span{
    color: #999;
    margin-left: 0.8rem;
    max-width: 2.2rem;
    text-align: center;
}
.icon-down{
    width:.4rem;
    height: .3rem;    
}
#menu{
    font-size: 0.2rem;
    padding-bottom: 0.06rem;
    padding-bottom: 0.1rem;
   /*  border: none; */
    border: 0.04rem solid #a8a7a7;
    border-radius: 0.3rem;
    color: #a8a7a7;
    background-color: #fff;
}
.mei-right{
    width: calc(50% - 1px) !important;
    border-left:solid 1px #eee;
}
.center-all{
    width: 100%;
}
.center-box{
    background: url(http://132.232.13.213/gaochen/img_bj_sr1.png);
    background-position:top center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.center-all-img{
    padding: .2rem .6rem;
    width: calc(100% - 1.2rem);
    color: #fff;
}
.income-title{
    height: 1.36rem;
    line-height: 1.36rem;
}
.icon_return{
    width: .8rem;
    margin-top: .28rem;
}
.my-income{
    font-size: 1.2rem;
    display: block;
    height: 2rem;
    line-height: 2.4rem;
    padding-top: 1rem;
    padding-top: 2rem;
    color: #fff;
}
.my-income-zi{
    display: block;
    padding-bottom: 1rem;
    color: #fff;
}
.income-list-box{
    border-top: solid .4rem #f5f5f5;
    width: calc(100% - 1.2rem);
    padding: 0 .6rem;
}
.income-list-tab{
    height: 1rem;
    line-height: 1rem;
    padding: .2rem;
    border-bottom: #f5f5f5 solid .04rem;
}
#delete{
   margin-right: 0.5rem;
}
.datetime{
    width: .8rem;
}
.income-li{
    padding: .3rem 0 0 0;
}
.left-box{
    height: 2rem;
    width: 15%;
}
.left-box>img{
    width: 60%;
}
.right-box{
    width: 85%;
    height: 2.4rem;
    padding-bottom: .3rem;
    border-bottom: #f5f5f5 solid .04rem;
}
.right-box span{
    height: .8rem;
    line-height: .8rem;
    display: block;
}
.meili-box{
    padding: 2rem 0 .6rem 0;
}
.mei-left{
    width: 50%;
}

</style>

